<template>
    <div class="msj_fenlei">
        <div style="padding: 10px 0 15px;">
            <el-button type="primary" size="small" @click="opens" >{{ buttxt }}</el-button>
        </div>
        <!-- 分类列表 -->
        <el-table
    :data="fenleis"
    border
    height="400"
    style="width: 100%">
    <el-table-column
      prop="id"
      label="ID"
     >
    </el-table-column>
    <el-table-column
      prop="sorts"
      label="显示顺序"
      width="160">
    </el-table-column>
    <el-table-column
    prop="fltitles"
      width="300"
      label="标题">
    </el-table-column>

    <el-table-column
    width="150"
      label="状态">
      <template slot-scope="scope">
        <p>{{ scope.row.state=='1'?'显示':'隐藏' }}</p>
      </template>
    </el-table-column>
    <el-table-column
      label="操作"
      width="200"
      >
      <template slot-scope="scope">
        <!-- 活动秒杀分类操作 -->
        <div v-if="!text">
           <el-button @click="handleClick(scope.row,0)" type="text" size="small">
           <i class="el-icon-edit" style="font-size: 20px;" ></i>
        </el-button>
        <el-button @click="handleClick(scope.row,1)" type="text" size="small">
            <i class="el-icon-delete-solid" style="font-size: 20px;"></i>
        </el-button>
        </div>
       <!-- 活动拼团分类操作 -->
        <div v-else>
          <el-button @click="handleClick(scope.row,0)" type="text" size="small">
            修改分类
        </el-button>
        <el-button @click="handleClick(scope.row,1)" type="text" size="small">
            删除分类
        </el-button>
        </div>
      </template>
    </el-table-column>
  </el-table>
  <!-- 添加修改 弹出框-->
  <el-dialog :title="titles" :modal="false" :visible.sync="dialogFormVisible">
  <el-form :model="form">
    <el-form-item label="排序" :label-width="formLabelWidth">
      <el-select v-model="form.region" >
        <el-option v-for="(item,index) in options" :key="index" :label="item.label" :value="item.value"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="分类名称" :label-width="formLabelWidth">
      <el-input v-model="form.name" :keyup="form.name=form.name.replace(/[^\w\u4E00-\u9FA5]/g, '')" style="width: 300px;" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="分类名称" :label-width="formLabelWidth">
      <el-radio-group v-model="form.resource">
      <el-radio label="显示"></el-radio>
      <el-radio label="隐藏"></el-radio>
    </el-radio-group>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="onclose">取 消</el-button>
    <el-button type="primary" @click="oksucess">确 定</el-button>
  </div>
</el-dialog>
<!-- 遮罩层 -->
<div class="zhezhao" v-show="dialogFormVisible">
</div>
    </div>
</template>

<script>
import {getmsjmsfenlei,delmsjmsfenlei,addmsjmsfenleis,setmsjmsfenleis,getmsjpinfenlei,delmsjpinfenlei,addmsjpinfenlei,setmsjpinfenlei} from '../../../utils/api'
export default {
    name: 'PhaemacySecondfenlei',
  props:['text'],
    data() {
        return {
            buttxt:'添加新秒杀商品分类',
            fenleis:[],
            dialogFormVisible: false,
            form: {
          name: '',
          region: '0',
          resource: '显示',
        },
        options:[
          {value: '0',label: '0'},
          {value: '1',label: '1'},
          {value: '2',label: '2'},
          {value: '3',label: '3'},
        ],
        formLabelWidth: '120px',
        titles:'添加分类'
        };
    },
    created(){
      this.buttxt=this.text?this.text:this.buttxt
      if(this.text){
        this.getpinfen()
      }else{
        this.getmsfen()
      }
       
    },
    mounted() {
        
    },

    methods: {
        // 获取所有分类 
        getmsfen(){
             getmsjmsfenlei().then(res=>{
              this.fenleis=res.data.data
            })
        },
        getpinfen(){
          getmsjpinfenlei().then(res=>{
            this.fenleis=res.data.data
          })
        },
        // 删除
        handleClick(v,n){
            if(n==1){
                (this.text?delmsjpinfenlei(v.id):delmsjmsfenlei(v.id)).then(res=>{
                    this.$message.success(res.data.msg)
                    if(this.text){
                        this.getpinfen()
                    }else{
                      this.getmsfen()
                    }
                })
            }else{
              this.titles='修改分类'
              this.dialogFormVisible = true;
              this.form={
                id:v.id,
                name:v.fltitles,
                region: v.sorts,
                resource: v.state=='1'?'显示':'隐藏',
              }
            }
        },
        // 打开弹出框
        opens(){
            this.dialogFormVisible = true;
            this.titles='添加分类'
        },
        // 关闭弹出框
        onclose(){
          this.dialogFormVisible = false;
          this.form={
            name: '',
          region: '0',
          resource: '显示',
          }
        },
        // 确定 
        oksucess(){
          let obj={
            fltitles:this.form.name,
            state:this.form.resource=='显示'?'1':'0',
            sorts:this.form.region,
          }
          if(obj.fltitles){
            if(this.text){
              (this.form.id?setmsjpinfenlei({id:this.form.id,...obj}):addmsjpinfenlei(obj)).then(res=>{
                this.$message.success(res.data.msg)
                this.getpinfen()
                this.onclose()
              })
            }else{
              (this.form.id?setmsjmsfenleis({id:this.form.id,...obj}):addmsjmsfenleis(obj)).then(res=>{
              this.$message.success(res.data.msg)
              this.getmsfen()
              this.onclose()
            })
            }
            
          }else{
            this.$message.error('分类名称不能为空')
          }
        }
    },
};
</script>

<style  scoped>
*{
    margin: 0;
}
    .msj_fenlei{
        width: 100%;
    }

    .zhezhao{
  width: 100%;
  height: 100vh;
  background: #333;
  z-index: 999;
  opacity: 0.5;
  position: fixed;
  top: 0; left: 0;
}
.el-form-item{
  margin-bottom: 20px;
}
</style>